<template>
  <view class="wrong positionRe">
    <uni-nav-bar title="错 题 集" leftIcon="icon-fanhui" rightIcon="true" @clickLeft="$back()">
    </uni-nav-bar>
    <!-- <scroll-view scroll-y class="heightAuto"> -->
    <view class="wrong_contain u-f-ajc">

      <view class="list u-f positionRe">
        <view class="list-item" v-for="(item,index) in subjectList" :key="index" @click="toPage(item.id)">
          <image :src="item.cover" mode="aspectFill"></image>
          <view class="color64 words">
            {{item.disciplineTitle}}
          </view>
        </view>
      </view>
      <image class="bottom_img" src="/static/img/wrong_bt.png"></image>
    </view>

    <!-- </scroll-view> -->
  </view>
</template>

<script>
  import {
    mapState,mapMutations,
    mapActions
  } from 'vuex'
  export default {
    computed: { ...mapState(['userInfo', 'subjectList', 'isConnected', 'wrongModels'])
    },
    data() {
      return {
        subjectIndex:0,
        special: [], //专题练习
        sprintList: [] //考前冲刺
      };
    },
    async onLoad() {
      this.getList()
      // console.log(this.subjects)
    },
    methods: {
      ...mapMutations(['setWrongModels']),
      ...mapActions(['setSubjectListAsync']),
      toPage(id) {
        console.log(id)
        this.$toPage(`./resolve?id=${id}`)
      },
      getList() {
        //判断是否连网
        if (!this.isConnected && this.wrongModels.length > 0) {
          // console.log(this.testModel)
          let obj = this.wrongModels.filter(item => item.disciplineId === this.subjectList[this.subjectIndex].id)
          this.specialList = obj.specialList
          this.sprintList = obj.sprintList
          let img = ''
          switch (this.subjectList[this.subjectIndex].disciplineTitle) {
            case '语文':
              img = '../../../static/subject/yuwen.png';
              break;
            case '数学':
              img = '../../../static/subject/shuxue.png';
              break;
            case '英语':
              img = '../../../static/subject/yingyu.png';
              break;
            case '物理':
              img = '../../../static/subject/wuli.png';
              break;
            case '生化':
              img = '../../../static/subject/shenghua.png';
              break;
          }

        } else if (this.isConnected) {
          this.getWrongPaper()
        } else {
          this.$showToast('未联网无数据')
        }

      },
      getWrongPaper() {
        let disciplineId = this.subjectList[this.subjectIndex].id
        // console.log('disciplineId', disciplineId)
        if (disciplineId) {
          uni.showLoading()
          this.isLoading = true
          this.loadtext = '加载中...';
          this.$http.get('/examPaper/wrong/list', {
            params: {
              disciplineId,
              studentId: this.userInfo.id
            }
          }).then(res => {
            this.isLoading = false
            // 专题
            this.specialList = res.data.special
            // 冲刺
            this.sprintList = res.data.spurt
            console.log(res.data)
            this.setWrongModels({
              disciplineId: disciplineId,
              specialList: this.specialList,
              sprintList: this.sprintList
            })

            uni.hideLoading()
          }).catch(err => {
            uni.hideLoading()
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .wrong {
    height: 100%;
    // background: url(../../../static/index/home_bg.png) no-repeat;
    // background-size: cover;
    background: #F5F6FA;

    .heightAuto {
      height: calc(100vh - var(--status-bar-height) - 8vh);
    }

    .wrong_contain {
      .bottom_img {
        width: 100vw;
        height: px2vh(547);
        position: absolute;
        bottom: 0px;
        left: 0px;
      }
    }

    .list {
      margin-top: px2vh(96);
      width: 83%;
      flex-wrap: wrap;
      justify-content: flex-start;
      z-index: 999;

      // position: absolute;
      // right: 0;
      // top: 0;
      &-item {
        @include list-item;
        background: #ffffff;
        margin: px2vh(32) px2vw(64) 0px 0px;
      }
    }
  }
</style>
